 .tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
 /* width:20%;*/
  order: 1;
  text-align:center; /* Label alignment */
  display: block;
  padding: 1.0em; /* Label spacing */
  box-sizing:border-box;
  background: #ebeef2; /* Label background color */
  border-top: 1px solid #ddd; /* Label border */
  border-right: 1px solid #ddd; /* Label border */
  border-bottom: 1px solid #ddd; /* Label border */
  
}
.tabs label:first-of-type {
  border-left: 0px solid #ddd; /* Label border */
}
.label {
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:16px;
  cursor:pointer;
  /*padding: 3px;*/
}
.content {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
 /* padding: 2em; /* Content padding */
  box-sizing:border-box;
  /*background: #fff;*/ /* Content background color */
 /* border: 1px solid #ddd; /* Content border */
  border-top: 0;
  /*line-height: 1.3;*/
  
}
.tabs input[type="radio"] {
  display: none;
  
}
.tabs input[type="radio"]:checked + label {
  background-color: #2c3e50;; /* Active label background color */
  color: #fff; /* Active label text color */
  border-bottom: 0;
  border-top: 3px solid #27ae60;
 
}
.tabs input[type="radio"]:checked + label + .content {
  display: block;
  
}
@media screen and (max-width: 767px) {
  .tabs {
   /* border-left:1px solid #ddd;
    border-right:1px solid #ddd;*/
    border-bottom:1px solid #ddd;
  }
  .tabs label,
  .tabs .content {
    order: initial;
  }
  .tabs label {
    width: 100%;
    
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
  }
  .tabs label:first-of-type {
    border-left: 0;
  }
  .tabs input[type="radio"]:checked + label {
    border-bottom: 1px solid #ddd;
	border-left:1px solid #ddd;
  }
  .content {
    border:0;
    padding:0.7em;
  }
}